import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { ToastProvider } from '@zendeskgarden/react-notifications';
import { ToastProviderStory } from './stories/ToastProviderStory';
import { TOAST_PLACEMENT_OPTIONS } from './stories/data';
import README from '../README.md';

<Meta title="Packages/Notifications/ToastProvider" component={ToastProvider} />

# API

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="ToastProvider"
    args={{ children: 'Notification', autoDismiss: true, milliseconds: 5000 }}
    argTypes={{
      placementProps: { control: 'object' },
      children: { table: { category: 'Toast' } },
      autoDismiss: { table: { category: 'Toast' } },
      milliseconds: { table: { category: 'Toast' } },
      placement: {
        control: 'radio',
        options: TOAST_PLACEMENT_OPTIONS,
        table: { category: 'Toast' }
      }
    }}
  >
    {args => <ToastProviderStory {...args} />}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
